<template>
	<div>
		<div class="app">
			<el-image :src="laba" class="icon"></el-image>
			<el-carousel height="30px" direction="vertical" :autoplay="true" indicator-position="none" interval="1500" style="flex: 1">
				<el-carousel-item v-for="(item, index) in items" :key="index">
					<text style="height: 30px; display: flex; align-items: center; margin-left: 5px">{{ item.title }}</text>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script setup lang="ts" name="banner">
import { onBeforeMount, ref } from 'vue';

const items = ref([
	{
		title: '138****0653用户下单成功！',
	},
	{
		title: '156****8888用户下单成功！',
	},
	{
		title: '178****9387用户下单成功！',
	},
]);

const laba = ref('/@/assets/icon_laba.png');

const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
});

const list = ref();
onBeforeMount(() => {
	// list.value = props.data;
	// if (list.value.data.length <= 0) {
	// 	list.value.data.push({});
	// }
});
</script>

<style lang="scss" scoped>
.app {
	width: 100%;
	height: 50px;
	display: flex;
	padding-left: 10px;
	align-items: center;
	background-color: #fff;
}

.icon {
	width: 20px;
	height: 20px;
}
</style>
